<template>
  <el-form label-width="100px">
    <CommonProps :placeholder="false" :compWidth="false" />
    <el-form-item label="开始占位">
      <el-input v-model="fs.getProps().bPlaceholder" />
    </el-form-item>
    <el-form-item label="结束占位">
      <el-input v-model="fs.getProps().ePlaceholder" />
    </el-form-item>
    <el-form-item label="显示类型">
      <el-select v-model="fs.getProps().type">
        <el-option label="日范围" value="daterange"></el-option>
        <el-option label="月范围" value="monthrange"></el-option>
        <el-option label="日期时间范围" value="datetimerange"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="默认范围">
      <el-date-picker v-model="fs.getProps().defaultVal" :type="fs.getProps().type" :value-format="valueFormat" />
    </el-form-item>
    <CommonPropsTwo />
  </el-form>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import CommonProps from '../../common-props/Props.vue'
import CommonPropsTwo from '../../common-props/PropsTwo.vue'
import { ElForm, ElFormItem, ElInput, ElDatePicker, ElSelect, ElOption } from 'element-plus'
import { useFlowStore } from '@/stores/flow'
import { dateFormatType } from '../../supports/utils'

const fs = useFlowStore()
const valueFormat = computed(() => dateFormatType(fs.getProps().type))
</script>

<style lang="scss" scoped></style>
